<template>
  <div class="homePage">
    <div class="left">
      <div class="item1">
        <div class="header headerRed">
          人口民生
        </div>
        <div class="item1Content">
          <div class="tab pelpleTab1">
            <div class="tabContent">
              <p class="tabContentTitle">城市人口</p>
              <p class="tabContentInfo">12452万</p>
            </div>
          </div>
          <div class="tab pelpleTab2">
            <div class="tabContent">
              <p class="tabContentTitle">就业人口</p>
              <p class="tabContentInfo">165.35万</p>
            </div>
          </div>
          <div class="tab pelpleTab3">
            <div class="tabContent">
              <p class="tabContentTitle">服务平台使用</p>
              <p class="tabContentInfo">16526</p>
            </div>
          </div>
          <div class="tab pelpleTab4">
            <div class="tabContent">
              <p class="tabContentTitle">平安指数</p>
              <p class="tabContentInfo">98.62</p>
            </div>
          </div>
        </div>
      </div>
      <div class="item2">
        <div class="header headerGreen">
          水利能源
        </div>
        <div class="item2Content">
          <div class="ringChartDiv">
            <div class="left">
              <dv-active-ring-chart
                :config="config"
                style="width: 100%; height: 100%"
              />
            </div>
            <div class="right">
              <img src="../../assets/images/home/water1.png" />
              <dv-digital-flop
                :config="numConfig"
                style="width: 200px; height: 50px;float: right;"
              />
            </div>
          </div>
          <div class="ringChartDiv">
            <div class="left">
              <dv-active-ring-chart
                :config="config"
                style="width: 100%; height: 100%"
              />
            </div>
            <div class="right">
              <img src="../../assets/images/home/water2.png" />
              <dv-digital-flop
                :config="numConfig"
                style="width: 200px; height: 50px;float: right;"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="item3">
        <div class="header headerBlue">
          交通出行
        </div>
        <div class="item3Content">
          <div class="tab tab2">
            <p class="trafficTitle">拥堵指数</p>
            <p class="trafficNum">65.62</p>
          </div>
          <div class="tab tab1">
            <p class="trafficTitle">主干道车速</p>
            <p class="trafficNum">25.36<span>km/h</span></p>
          </div>
          <div class="tab tab2">
            <p class="trafficTitle">地铁出行人次</p>
            <p class="trafficNum">925.12</p>
          </div>
          <div class="tab tab1">
            <p class="trafficTitle">车辆在途量</p>
            <p class="trafficNum">321.12</p>
          </div>
        </div>
      </div>
    </div>
    <div class="middle"></div>
    <div class="right">
      <div class="item1">
        <div class="header headerRed">
          动态事件
        </div>
        <div class="item1Content">
          <dv-scroll-board
            :config="scrollConfig"
            style="width: 100%; height: 100%"
          />
        </div>
      </div>
      <div class="item2">
        <div class="header headerYellow">
          商业经济
        </div>
        <div class="item2Content">
          <div class="tab1 tabRight">
            <p class="economyTitle">市场主体</p>
            <p class="economyNum">123121</p>
          </div>
          <div class="tab1">
            <p class="economyTitle">上市企业</p>
            <p class="economyNum">123121</p>
          </div>
          <div class="tab2 tabRight">
            <p class="economyTitle">2022年GDP</p>
            <p class="economyNum">41600亿</p>
            <p class="economyRate"><img src="../../assets//images//home/up.png"/>5.3</p>
          </div>
          <div class="tab2">
            <p class="economyTitle">人均可支配收入</p>
            <p class="economyNum">7.74万/人</p>
            <p class="economyRate"><img src="../../assets//images//home/up.png"/>5.3</p>
          </div>
        </div>
      </div>
      <div class="item3">
        <div class="header headerGreen">
          安防应急
        </div>
        <div class="item3Content">
          <div>
            <ul class="emergencyUl">
              <li>
                <div class="emergencyTitle">安防监控场所</div>
                <div class="emergencyNmu">23</div>
              </li>
              <li>
                <div class="emergencyTitle">安防监控场所</div>
                <div class="emergencyNmu">23</div>
              </li>
              <li>
                <div class="emergencyTitle">安防监控场所</div>
                <div class="emergencyNmu">23</div>
              </li>
            </ul>
          </div>
          <div class="line"></div>
          <div>
            <ul class="emergencyUl emergencyUlWarn">
              <li>
                <div class="emergencyTitle">安保报警</div>
                <div class="emergencyNmu">89</div>
              </li>
              <li>
                <div class="emergencyTitle">消防报警</div>
                <div class="emergencyNmu">189</div>
              </li>
              <li>
                <div class="emergencyTitle">设备报警</div>
                <div class="emergencyNmu">2</div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    function formatter(number) {
      const numbers = number.toString().split("").reverse();
      const segs = [];
      while (numbers.length) segs.push(numbers.splice(0, 3).join(""));
      return segs.join(",").split("").reverse().join("");
    }
    return {
      config: {
        data: [
          { name: "正常", value: 65 },
          { name: "异常", value: 35 },
        ],
        radius: "90%",
        activeRadius: "85%",
        lineWidth: 5,
        color: ["green", "red"],
        digitalFlopStyle: {
          fontSize: 16,
        },
      },
      numConfig: {
        number: [123456],
        content: "{nt}个",
        formatter,
        style: {
          fontSize: 30,
          fill: "#FFC55B",
        },
      },
      scrollConfig: {
        data: [
          ["<i style='color:#05c1ff;font-size:8px' class='iconfont icon-lingxing'></i>","【神十六航天员】出舱现场曝光","<i style='color:#ff2e00' class='iconfont icon-fire'></i>","<span style='color:#ff2e00;font-size:12px'>152</span>"],
          ["<i style='color:#05c1ff;font-size:8px' class='iconfont icon-lingxing'></i>","【空气重污染橙色预警】北京启动空气重污染橙色预警","<i style='color:#ff2e00' class='iconfont icon-fire'></i>","<span style='color:#ff2e00;font-size:12px'>148</span>"],
          ["<i style='color:#05c1ff;font-size:8px' class='iconfont icon-lingxing'></i>","【首启重污染预警】新标准实施后北京首启重污染预警 霾从何来","<i style='color:#ff2e00' class='iconfont icon-fire'></i>","<span style='color:#ff2e00;font-size:12px'>143</span>"],
          ["<i style='color:#05c1ff;font-size:8px' class='iconfont icon-lingxing'></i>","【第十届北京香山论坛】为世界注入更多确定性、稳定性和正能量","<i style='color:#ff2e00' class='iconfont icon-fire'></i>","<span style='color:#ff2e00;font-size:12px'>136</span>"],
          ["<i style='color:#05c1ff;font-size:8px' class='iconfont icon-lingxing'></i>","【业计量测试中心】北京批准新建2家产业计量测试中心","<i style='color:#ff2e00' class='iconfont icon-fire'></i>","<span style='color:#ff2e00;font-size:12px'>132</span>"],
          ["<i style='color:#05c1ff;font-size:8px' class='iconfont icon-lingxing'></i>","【首席数据官】政府机关将设首席数据官","<i style='color:#ff2e00' class='iconfont icon-fire'></i>","<span style='color:#ff2e00;font-size:12px'>125</span>"],
          ["<i style='color:#05c1ff;font-size:8px' class='iconfont icon-lingxing'></i>","【数字经济发展】检察机关助力打造数字经济发展“北京样板","<i style='color:#ff2e00' class='iconfont icon-fire'></i>","<span style='color:#ff2e00;font-size:12px'>121</span>"],
          ["<i style='color:#05c1ff;font-size:8px' class='iconfont icon-lingxing'></i>","【质量管理奖】第三届北京市人民政府质量管理奖颁奖会议召开","<i style='color:#ff2e00' class='iconfont icon-fire'></i>","<span style='color:#ff2e00;font-size:12px'>119</span>"],
          ["<i style='color:#05c1ff;font-size:8px' class='iconfont icon-lingxing'></i>","【广告业十条】北京市出台“广告业十条” 促进广告业持续健康稳定发展”","<i style='color:#ff2e00' class='iconfont icon-fire'></i>","<span style='color:#ff2e00;font-size:12px'>112</span>"],
          ["<i style='color:#05c1ff;font-size:8px' class='iconfont icon-lingxing'></i>","【长峰医院重大火灾】事故相关责任人被严肃查处","<i style='color:#ff2e00' class='iconfont icon-fire'></i>","<span style='color:#ff2e00;font-size:12px'>108</span>"],
          ["<i style='color:#05c1ff;font-size:8px' class='iconfont icon-lingxing'></i>","【北京马拉松】2023北马10月29日开跑北京交管部门发布出行提示","<i style='color:#ff2e00' class='iconfont icon-fire'></i>","<span style='color:#ff2e00;font-size:12px'>103</span>"],
          ["<i style='color:#05c1ff;font-size:8px' class='iconfont icon-lingxing'></i>","【住建委大排查】北京市住房城乡建委持续开展大排查大整治专项行动","<i style='color:#ff2e00' class='iconfont icon-fire'></i>","<span style='color:#ff2e00;font-size:12px'>99</span>"],
          ["<i style='color:#05c1ff;font-size:8px' class='iconfont icon-lingxing'></i>","【世界农业科技创新大会】首届世界农业科技创新大会周四开幕","<i style='color:#ff2e00' class='iconfont icon-fire'></i>","<span style='color:#ff2e00;font-size:12px'>95</span>"],
          ["<i style='color:#05c1ff;font-size:8px' class='iconfont icon-lingxing'></i>","【国际非遗周】首届北京国际非遗周闭幕 中外技艺共觅“和合天下”","<i style='color:#ff2e00' class='iconfont icon-fire'></i>","<span style='color:#ff2e00;font-size:12px'>92</span>"],
          ["<i style='color:#05c1ff;font-size:8px' class='iconfont icon-lingxing'></i>","北京国际摄影周】2023:用影像语言讲好中国故事","<i style='color:#ff2e00' class='iconfont icon-fire'></i>","<span style='color:#ff2e00;font-size:12px'>89</span>"],
          ["<i style='color:#05c1ff;font-size:8px' class='iconfont icon-lingxing'></i>","【中国蓝天观察论坛】在北京成功举办","<i style='color:#ff2e00' class='iconfont icon-fire'></i>","<span style='color:#ff2e00;font-size:12px'>87</span>"],
          ["<i style='color:#05c1ff;font-size:8px' class='iconfont icon-lingxing'></i>","【人才交流】进京揽才诚意满满 北京·山东人才周共商新时代人才高地建设","<i style='color:#ff2e00' class='iconfont icon-fire'></i>","<span style='color:#ff2e00;font-size:12px'>85</span>"],
          ["<i style='color:#05c1ff;font-size:8px' class='iconfont icon-lingxing'></i>","【疾控疫情周报】新冠病例连续两周超流感,重回第一","<i style='color:#ff2e00' class='iconfont icon-fire'></i>","<span style='color:#ff2e00;font-size:12px'>83</span>"],
          ["<i style='color:#05c1ff;font-size:8px' class='iconfont icon-lingxing'></i>","【甲流重要提示】北京上周流感病例较2019年同期上升78%,甲流占绝对优势!重要提示","<i style='color:#ff2e00' class='iconfont icon-fire'></i>","<span style='color:#ff2e00;font-size:12px'>82</span>"],
          ["<i style='color:#05c1ff;font-size:8px' class='iconfont icon-lingxing'></i>","【周末再迎冷空气】北京本周气温波动上升,南风北风交替登场,周末再迎冷空气","<i style='color:#ff2e00' class='iconfont icon-fire'></i>","<span style='color:#ff2e00;font-size:12px'>80</span>"],
        ],
        rowNum: 6,
        columnWidth: [15,,20,30],
        oddRowBGC: "",
        evenRowBGC: "",
      },
    };
  },
  methods: {},
  created() {},
  mounted() {},
};
</script>

<style lang="scss" scoped>
@import "../../style//home.scss";
</style>
